import React from "react";
import { useNavigate } from "react-router-dom";
import Warehouse from "@/components/Warehouse";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";

import "./index.scss";

const NftSell = () => {
  
  const navigate = useNavigate();

  /**
   * 返回上一页
   */
  function handleGoBack() {
    navigate(-1); // 或者使用 history.go(-1)
  }

  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div className="nft-sell-container">
      <div className="inner-container">
        <div className="content-container">
          <div className="hd-box">出售</div>
          <div className="form-box">
            <form className="form-class">
              {/* 选择 */}
              <div className="form-item">
                <div className="form-item-label">
                  <label htmlFor="">选择</label>
                </div>
                <div className="form-item-content">
                  <div
                    className="input-file-box"
                    onClick={() => {
                      handleClickOpen();
                    }}
                  ></div>
                </div>
              </div>
              {/* 名称 */}
              <div className="form-item">
                <div className="form-item-label">
                  <label htmlFor="">名称</label>
                </div>
                <div className="form-item-content">
                  <input
                    className="input-text"
                    type="text"
                    placeholder="请输入出售商品的名称"
                  />
                </div>
              </div>
              {/* 价格 */}
              <div className="form-item">
                <div className="form-item-label">
                  <label htmlFor="">价格</label>
                </div>
                <div className="form-item-content">
                  <input
                    className="input-text"
                    type="text"
                    placeholder="请输入商品出售的价格"
                  />
                </div>
              </div>
              {/* 说明 */}
              <div className="form-item">
                <div className="form-item-label">
                  <label htmlFor="">说明</label>
                </div>
                <div className="form-item-content">
                  <textarea
                    className="textarea-class"
                    rows={8}
                    name=""
                    id=""
                  ></textarea>
                </div>
              </div>
              <div className="form-btns">
                <button className="btn-submit" type="submit">
                  确认
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      {/* 返回 */}
      <div className="bottom-box">
        <div className="return-back-btn" onClick={handleGoBack}>
          <KeyboardBackspaceIcon />
          <span>返回</span>
        </div>
      </div>

      {/* 仓库 */}
      <Warehouse open={open} onClose={handleClose} />
    </div>
  );
};

export default NftSell;
